<template>
	<div class="content">
		<div class="box">
			<div class="top">
				<span>到账银行卡</span>
				<span class="bank">{{bank}}</span>
				<span></span>
			</div>
			<div class="middle">
				<div class="span">
					提现金额
				</div>
				<div class="bottom">
					<span>￥</span>
					<input type="text" v-model="price" />
				</div>
			</div>
			<div class="rule">
				当前可提现金额{{money}}元，<span @click="allwhole">全部提现</span>
			</div>
		</div>
		<div class="footer" @click="cashout">
			提现
		</div>
	</div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
			price: '',
			name:'',
			id:'',
			money:'0',
			bank:''
        }
	},
	mounted() {
		this.loadData();
		this.loadMoney()
	},
    methods:{
        allwhole(){
			this.price = this.money;
		},
		loadMoney(){
			this.$http.post('/api/withdraw/record',{page:1,limit:10000}).then(res => {
				// console.log('111',res)
				this.money = res.data.balance;
			})
		},
		loadData(){
			this.$http.post('/api/withdraw/bankList').then(res => {
				// console.log(res)
				this.name = res.data.data[0].name;
				this.id = res.data.data[0].id;
				this.bank = res.data.data[0].open_bank;
				// console.log(this.id)
			})
		},
        cashout(){
			if(this.price == ''){
				Toast('请输入金额');
				return
			}
			if(this.price == 0){
				Toast('金额不能为0');
				return
			}
			this.$http.post('/api/withdraw/withdraws',{id:this.id,price:this.price}).then(res => {
				// console.log(res);
				this.$router.back()
			})
        }
    }
}
</script>
<style lang="scss" scoped="scoped">
    .box{
		width:91vw;
		height:54.66vw;
		background:rgba(255,255,255,1);
		border-radius:10px;
		margin: 4vw auto;
		padding: 4vw;
		box-sizing: border-box;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			span{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.bank{
				color:rgba(0,59,143,1);
			}
		}
		.middle{
			margin-top: 13.33vw;
			
			.span{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.bottom{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #C0C0C0;
				span{
					font-size:36px;
					font-family:PingFang SC;
					font-weight:800;
					color:rgba(51,51,51,1);
				}
				input{
					margin-left: .9375rem;
					flex: 1;
                    outline: none;
                    border: none;
				}
			}
		}
		.rule{
			margin-top: 3.2vw;
			font-size:14px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(153,153,153,1);
			span{
				color: #E7BC86;
			}
		}
	}
	.footer{
		width:91vw;
		height:10.66vw;
		margin: 0 auto;
		background:rgba(231,188,134,1);
		border-radius:10px;
		line-height: 10.66vw;
		text-align: center;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
</style>